<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App">
      <template v-slot:test>
        <div>test slot</div>
      </template>
    </HelloWorld>
    <div>----------{{text}}-----{{text}}----{{text}}---------------------------------------------------</div>
    <els-elem :elem="elem" :context="context"></els-elem>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Options({
  components: {
    HelloWorld,
  },
  data:() => ({bool:{value:false},text:'test',msg:'============================'}),
  computed:{
    elem():any {
      const t = {tag:'div','cls':[
        {tag:'button','@click':'handleClick',cls:'test v-if and else'},
        {tag:'div',cls:'.............. {{ n }} ................'},
        {tag:'div','cls':'bool {{msg}} {{bool.value}}'},
        {tag:'div',cls:'...{{a}}...{{b}}..{{c}}....{{a + b + c}}.....{{ bool }}.............','v-bind:style':"{color:bool.value?'red':'green'}"},
        
        {tag:'i',cls:'i am v-if when bool is true','v-if':'bool.value'},
        {tag:'i',cls:'i am v-if when bool is false','v-if':'!bool.value'}
      ]}
      return {tag:'div',cls:[t]}
    },
    context(){
      console.log('........update context.....')
      // const msg = this.msg;
      const bool = this.bool;
      // const handleClick = this.handleClick;
      return {handleClick:this.handleClick,bool,n:1,a:'a',b:'b',c:'c',msg:this.msg}
    }
  },
  methods:{
    handleClick(){
      this.bool.value = !this.bool.value
      console.log('..........',this.bool)
    }
  }
})
export default class Home extends Vue {}
</script>
